<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<!-- width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） -->
	<title></title>
	<style type="text/css">
		#div_menue
		{
			height: 70px;
			width: 100%;
			position:absolute;
            top: 0;
            left: 0;
            border-bottom: 2px solid #8834a1;
		}
		.img_log
		{
			height: 70%;
			width: 100%;
			
		}
		.div_nav ul
		{
			list-style-type: none;
			margin: 0;
			padding: 0;
			/*width: 100%;*/
			/*overflow: hidden;*/

			
		}
		.div_style
		{
			width:85%;
			margin:auto;
		}
		.div_nav li
		{
			float: left;
		}
		.div_nav
		{
			font-size:1.15vh; 
			font-size:1.15vw; 
			width: 50%;
			margin-top: 30px;
			margin-left: 120px;
			display:inline-block;
		}
		a:link,a:visited
		{
			display:block;
			padding-top:7px;
			padding-bottom:7px;
			color: black;
			text-align:center;
			text-decoration:none;/*无下划线*/
			text-transform:uppercase;/*大写有效*/
		}
		#div_Img
		{
			height:70px;margin-top:10px;float:left;
		}
		a:hover,a:active
		{   color: #8834a1;
		}
		
		.div_nav ul li ul { position:absolute; width:150px; background:#8834a1;display:none;overflow:hidden}
		.div_nav ul li ul li { float:none; transition:all 5s ease-in-out;  }/*不漂浮*/
		.div_nav ul li ul li a { border-right:none;border-top:1px solid #ccc;position: relative; animation:mymove .5s 1; width: 150px;}
		.div_nav ul li ul li a:hover{color:#8834a1;background-color: white; }
		.div_nav ul li:hover ul{ display:block;}
		@keyframes mymove
		{
		from {margin-left:-60px}
		to {margin-left:0}
		}
	</style>
</head>
<body>
	<div class="div_style">
	<div id="div_menue">
		<div id="div_Img">
		    <img src="img/menue.png" class="img_log">
		</div>
		<div class="div_nav">
		<ul>
			<li style="width: 10%"><a href="#home">首页</a></li>
			<li style="width: 13%"><a href="#home">整形项目</a>
				<ul>
					<li><a href="#home">整形美容</a></li>
					<li><a href="#home">美肤嫩肤</a></li>
					<li><a href="#home">无创美容</a></li>
				</ul>
			</li>
			<li style="width: 13%"><a href="#home">优惠活动</a></li>
			<li style="width: 13%"><a href="#home">专家团队</a></li>
			<li style="width: 13%"><a href="#home">整形动态</a></li>
			<li style="width: 13%"><a href="#home">关于我们</a></li>
			<li><a href="#home">联系我们</a></li>
		</ul>
		</div>
	</div>
	</div>
	<script type="text/javascript">
	</script>
</body>
</html>